<template>
	<view>
		<view class="grace-fixed-top" :style="{top:top}">
			<scroll-view class="grace-tab-title grace-center" scroll-x="true" id="grace-tab-title">
				<view v-for="(cate, index) in categories" :key="index" :data-cateid="cate.cateid" :data-index="index" :class="[cateCurrentIndex == index ? 'grace-tab-current' : '']" @tap="tabChange">{{cate.name}}</view>
			</scroll-view>
		</view>
		<view style="height:50px;"></view>
		<!-- 文章内容区 -->
		<view class="grace-news-list" style="width:94%; padding:5px 3%;">
			<block v-for="(item, index) in artList" :key="index">
				<!-- 一张图 -->
				<navigator :url="'../artInfo/artInfo?artId='+item.id" v-if="item.imgs.length < 3" open-type="navigate" class="big-img">
					<view class="title">{{item.title}}</view>
					<view>
						<image :src="item.imgs[0]" mode="widthFix"></image>
					</view>
					<view class="desc">
						<text class="grace-icons icon-eye"></text> {{item.viewNumber}}
						<text class="grace-icons icon-write" style="margin-left:10px;"></text> {{item.author}}
						<text style="float:right;">{{item.time}}</text>
					</view>
				</navigator>
				<!-- 三张图 -->
				<navigator :url="'../artInfo/artInfo?artId='+item.id" class="imgsItem" v-if="item.imgs.length >= 3">
					<view class="title">{{item.title}}</view>
					<view class="imgs">
						<image :src="item.imgs[0]" mode="widthFix"></image>
						<image :src="item.imgs[1]" mode="widthFix"></image>
						<image :src="item.imgs[2]" mode="widthFix"></image>
					</view>
					<view class="desc">
						<text class="grace-icons icon-eye"></text> {{item.viewNumber}}
						<text class="grace-icons icon-write" style="margin-left:10px;"></text> {{item.author}}
						<text style="float:right;">{{item.time}}</text>
					</view>
				</navigator>
			</block>
		</view>
		<graceLoading :loadingType="loadingType"></graceLoading>
	</view>
</template>
<script>
var page = 1, cate = 0;
import graceLoading from '../../graceUI/components/graceLoading.vue';
export default{
	data() {
		return {
			show : false,
            loadingType : 0,
			isEnd : false,
			top : 0,
			//分类信息
			categories : [
				{cateid : 0, name : "全部"},
				{cateid : 1, name : "风景"},
				{cateid : 2, name : "游记"},
				{cateid : 3, name : "世界"}
			],
			// 当前选择的分类
			cateCurrentIndex : 0,
			// 演示文章数据
			artList : []
		};
	},
	onLoad:function(){
		// #ifdef H5
		this.top = '44px';
		// #endif
		page = 1;
		this.getNewsList();
	},
	//下拉刷新
	onPullDownRefresh : function(){
		// 重置分页及数据
		page             = 1;
		this.loadingType == 0;
		this.isEnd       = false;
		this.artList     = [];
		this.getNewsList();
	},
	// 加载更多
	onReachBottom : function(){
		//避免多次触发
		if (this.loadingType == 1 || this.isEnd){return ;}
		this.getNewsList();
	},
	methods:{
		// 数据和分页是模拟的实际也是这样写
		getNewsList: function(){
			this.loadingType = 1;
			// 假设已经到底， 实际根据api接口返回值判断
			if(page >= 3){
				this.isEnd = true;
				this.loadingType = 2;
				return ;
			}
			uni.request({
				// 模拟api
				url: 'https://easy-mock.com/mock/5cb9701f18a6f325b717f772/gmall/newsList#!method=get?page='+page+'&cate='+cate,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res);
					var newsList = res.data.data;
					this.artList = this.artList.concat(newsList);
					this.loadingType = 0;
					page++;
				},
				complete: res => {
					this.loadingType = 0;
					uni.stopPullDownRefresh();
				}
			});
		},
		tabChange : function(e){
			// 选中的索引
			var index  = e.currentTarget.dataset.index;
			// 具体的分类id
			var cateid = e.currentTarget.dataset.cateid;
			this.cateCurrentIndex = index;
			// 动态替换内容
			this.content = this.categories[index].name;
			
			
			// 读取分类数据
			cate = cateid; //把分类信息发送给api接口即可读取对应分类的数据
			// 重置分页及数据 
			page = 1;
			this.artList = [];
			this.loadingType == 0;
			this.isEnd       = false;
			this.artList     = [];
			// 加载对应分类数据覆盖上一个分类的展示数据 加载更多是继续使用这个分类
			this.getNewsList();
		}
	},
	components: {
        graceLoading
    }
}
</script>
<style>
.grace-tab-current{color:#FF0036; border-color:#FF0036 !important;}
.grace-news-list .imgs{max-height:150upx; overflow:hidden;}
</style>